<template>
  <!-- 弹窗 -->
  <div class="dialog_box">
    <el-dialog v-model="visible" title="审核" width="600px" @closed="onClosed">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
        <el-form-item label="审核结果" prop="state">
          <el-select v-model="form.state" placeholder="请选择审核结果">
            <el-option
              v-for="item in [
                { value: 2, name: '审核通过' },
                { value: 3, name: '审核不通过' }
              ]"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核原因" prop="remark">
          <el-input v-model="form.remark" type="textarea" maxlength="150" :rows="4" show-word-limit placeholder="请输入审核原因" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit(formRef)">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { orderAudit } from '@/api/salesleads/ordermanagement/orderlist'
  import { ref, reactive } from 'vue'
  const emit = defineEmits(['submit'])
  const visible = ref(false)
  const formRef = ref<any>()
  const form = reactive({
    order_id: '',
    state: '', //审核状态 2：通过 3：不通过
    remark: '' //审核原因
  })
  const rules = reactive<any>({
    state: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
    remark: [{ required: true, message: '请输入不通过原因', trigger: 'change' }]
  })
  // 新增收货地址
  const onSubmit = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
      if (valid) {
        orderAudit(form).then((res: any) => {
          visible.value = false 
          emit('submit')
        })
      }
    })
  }
  // 数据回显
  const handleAuditDialog = (row: any) => {
    visible.value = true
    form.order_id = row.id
  }
  // 关闭新增弹框
  const onClosed = () => {
    form.order_id = ''
    form.state = ''
    form.remark = ''
    formRef.value.resetFields()
  }
  defineExpose({
    handleAuditDialog
  })
</script>

<style lang="scss" scoped>
  .dialog_box {
    :deep(.el-dialog) {
      .el-dialog__header {
        border-bottom: 1px solid #eaeaea;
        .el-dialog__title {
          // font-size: 16px;
        }
      }
      .el-dialog__body {
        padding: 20px;
        border-bottom: 1px solid #eaeaea;
      }
    }
  }
  .btn_box {
    text-align: right;
  }
</style>
